<template>
  <div>
    <!-- 搜索栏 -->
    <Search></Search>

    <!-- 轮播图 -->
    <Swipe :data="data"></Swipe>

    <!-- <test></test> -->
    <!-- <div class="test1"></div> -->

    <!-- 跳转栏 -->
    <Category :data="data"></Category>

    <!-- 预览图 -->
    <Marquee :data="data"></Marquee>

    <!-- 三列商品展示栏 -->
    <Recommend :data="data" />

    <!-- 小标题栏 -->
    <!-- ------------------------------------------------------------ -->
    <!-- <div
      class="灰白色那坨东西"
      v-for="item of data.floorName"
      :key="item.id"
      style="
        text-align: center;
        background: rgb(226, 221, 221);
        line-height: 35px;
      "
    >
      {{ item }}
      <div
        class="展示的内容"
        style="
          display: grid;
          grid-template-columns: auto auto;
          grid-template-rows: 50px 50px;
        "
      >
        <div class="item-1" name="第一个网格"><van-image
          width="100"
          height="100"
          :src="$resetUrl(data.floor1[0].image)"
        /></div>
        <div><van-image
          width="50"
          height="50"
          :src="$resetUrl(data.floor1[1].image)"
        /></div>
        <div><p>3</p></div>
        <div><p>4</p></div>
        <div><p>5</p></div>
      </div>
    </div> -->
    <!-- 第一层---------------------------------------- -->
    <div
      class="灰白色那坨东西"
      v-bind="nameArr"
      style="
        text-align: center;
        background: rgb(226, 221, 221);
        line-height: 35px;
      "
    >
      {{ nameArr.floor1 }}
      <div>
        <van-row type="flex">
          <van-col span="12"
            ><van-image
              v-if="data.floor1"
              width="100px"
              height="100px"
              :src="$resetUrl(data.floor1[0].image)"
          /></van-col>
          <van-col span="12">2</van-col>
          <van-col span="12">3</van-col>
          <van-col span="12">4</van-col>
          <van-col span="12">5</van-col>
          <van-col span="12">6</van-col>
        </van-row>
      </div>
    </div>
    <!-- 第二层---------------------------------------- -->
    <div
      class="灰白色那坨东西"
      v-bind="nameArr"
      style="
        text-align: center;
        background: rgb(226, 221, 221);
        line-height: 35px;
      "
    >
      {{ nameArr.floor2 }}
    </div>
    <!-- 第三层---------------------------------------- -->
    <div
      class="灰白色那坨东西"
      v-bind="nameArr"
      style="
        text-align: center;
        background: rgb(226, 221, 221);
        line-height: 35px;
      "
    >
      {{ nameArr.floor3 }}
    </div>
    <!-- 改良中的网格布局------------------------------------------------------------- -->
    <div
      v-if="data.floor1"
      class="展示的内容"
      style="
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: 50px 50px;
      "
    >
      <div class="item-1" name="第一个网格">
        <van-image
          width="100"
          height="100"
          :src="$resetUrl(data.floor1[0].image)"
        />
      </div>
      <div>
        <van-image
          width="50"
          height="50"
          :src="$resetUrl(data.floor1[1].image)"
        />
      </div>
      <div><p>3</p></div>
      <div><p>4</p></div>
      <div><p>5</p></div>
      <div><p>6</p></div>
    </div>
    <!-- ------------------------------------------------- -->

    <!-- 热门商品 -->
    <div
      style="
        text-align: center;
        background: rgb(226, 221, 221);
        height: 35px;
        line-height: 35px;
      "
    >
      热卖商品
    </div>
    <HotGoods :data="data"></HotGoods>

    <!-- 底部栏 -->
    <TabBar></TabBar>
  </div>
</template>

<script>
import TabBar from "../../components/tabBar.vue";
// import test from "@/components/test";
import Search from "./search.vue";
import Swipe from "./swipe.vue";
// import axios from "axios"
// import http from "../../utils/request";
import { getIndexInfo } from "../../apis/home.js"; //引入函数式封装
// import { Button } from "vant";

import Category from "./category.vue";

import Marquee from "./ad.vue";
import Recommend from "./recommend.vue"; //vue-awesome-swiper  前置swiper
import HotGoods from "./hotGoods.vue";

export default {
  components: {
    TabBar,
    // test,
    Search,
    Swipe,
    // http,
    Category,
    Marquee,
    Recommend,
    HotGoods,
  },
  data() {
    return {
      data: {}, // 首页的数据
      nameArr: [],
      num1: 1,
      num2: 2,
      num3: 3,
    };
  },
  async created() {
    // 使用全局请求（类的get请求）
    this.$http.get(getIndexInfo).then((res) => {
      console.log(res);
    });
    //////////////
    // 使用函数式封装过的请求（函数式写法）
    // getIndexInfo().then((res) => {
    //   console.log(res);
    // });
    //////////////
    let res = await this.$http.get(getIndexInfo);
    this.data = res.data.data;
    this.nameArr = this.data.floorName;
    // this.hotGoods = res.data.data.hotGoods;
    // console.log(this.hotGoods);
    console.log(this.data);
    //////////////
    // 类
    // this.$http.request({
    //   url:getIndexInfo,
    //   method:"GET"
    // }).then((res)=>{
    //   console.log(res)
    // })
  },
};
</script>
<style>
/* .test1 {
  width: 700px;
  height: 100px;
  background: yellow;
} */
/* .gridDiv {
  display: grid;
  grid-template-columns: repeat(auto-fill, 50%);
} */
/* .item-1 {
  background: #b03532;
  grid-column: 1 / 3;
  grid-row: 1 / 3;
} */
/* 废案（网格布局）↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ */

/* 弹性布局↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ */
</style>